<template>
  <div class="mall-container">
    <div class="step-flag">
      <p>商城</p>
    </div>
    <div class="my-integral">
      <h2>当前积分</h2>
      <h3>{{ this.user.integration }}</h3>
    </div>
    <div class="pro-main">
      <h1>商品列表</h1>
      <div class="list">
        <div class="pro-list" v-for="item in list" :key="item.id">
          <img :src="item.image" alt="" />
          <div class="message">{{ item.name }}</div>
          <div>
            积分{{ item.price}}
            <span @click="convert(item._id,item.price,item)">兑换</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { put } from "../../utils/fecth";
export default {
  name: "shopping",
  data() {
    return {
      user: JSON.parse(localStorage.getItem('a')),
      list: JSON.parse(localStorage.getItem('list'))
    };
  },
  methods: {
    async convert(id, price) {
      // console.log(id,price,item)
      const data = await put("shop/exchange", { id: id });
      console.log(data);
      if (data.success == true) {
        //减积分，保存积分
        this.user.integration = this.user.integration - price;
        localStorage.setItem('a',JSON.stringify(this.user))
        console.log(this.user.integration)

        //把兑换的信息存到vuex，再存到localStorage
        // this.$store.state.exchange.push(item)
        // console.log(JSON.stringify(this.user)) 
      }
    },
  },
};
</script>

<style lang="scss">
.mall-container {
  width: 80%;
  height: 100%;
  margin: 0;
  .step-flag {
    width: 100%;
    height: 56px;
    padding: 0 40px;
    background: #fff;
    box-shadow: 5px 6px 4px rgba(213, 209, 209, 0.5);
    z-index: 9999;
    margin: 0;
    p {
      font-size: 16px;
      font-weight: 400;
      color: #202020;
      line-height: 56px;
      text-align: left;
    }
  }
  .my-integral {
    width: 960px;
    height: 160px;
    background: url("https://by-image.oss-cn-shanghai.aliyuncs.com/yfront/static/user/mall/pic_beijing0_jifen.png")
      100% 100%;
    margin: 46px auto;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    h2 {
      font-size: 20px;
      color: #fff;
      font-weight: bold;
    }
    h3 {
      font-size: 50px;
      color: #fff;
      font-weight: bold;
      margin: 0;
    }
  }
  .pro-main {
    width: 100%;
    h1 {
      font-size: 16px;
      color: #333;
      padding-bottom: 20px;
    }
    .list {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }
    .pro-list {
      width: 180px;
      height: 250px;
      background-color: rgb(243, 243, 243);
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin: 20px 0 0 60px;
      border-radius: 15px;
      box-shadow: 0 0 1px 0;
      img {
        width: 180px;
        height: 190px;
        border-radius: 15px 15px 0 0;
      }
      .message {
        line-height: 30px;
        width: 100%;
        height: 30px;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      span {
        float: right;
        cursor: pointer;
        background-color: cyan;
        color: rgb(235, 26, 235);
      }
    }
  }
}
</style>